<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:fb="http://www.facebook.com/2008/fbml">
<div id="facebookLoginPanel">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">×</button>
		<h3 id="myModalLabel">
			<g:message code="auth.login.facebook" />
		</h3>
	</div>
	<div class="modal-body">

		<g:formRemote name="facebookSigninForm" update="facebookLoginPanel"
			url="[controller: 'user', action: 'facebookSignin']"
			before="showLoadingImageSignin();">

			<div class="form-horizontal">
				<g:if test="${flash.message}">
					<div id="signinErrors" class="alert alert-error">
						<a class="close" data-dismiss="alert">×</a>
						${flash.message}
					</div>
				</g:if>

				<g:hasErrors bean="${user}">
					<g:eachError bean="${user}" var="error">
						<div id="signinErrors" class="alert alert-error">
							<a class="close" data-dismiss="alert">×</a>
							<g:message error="${error}" />
						</div>
					</g:eachError>
				</g:hasErrors>

				<div
					class="control-group ${hasErrors(bean: user, field: 'username', 'error')}">
					<label class="control-label" for="inputUserName"><g:message
							code="auth.login.username" /></label>
					<div class="controls">
						<g:field id="inputUserName" class="input-large" type="text"
							name="username" value="${user?.username}"
							placeholder="${message(code: 'auth.login.username')}" />
					</div>
				</div>

				<div
					class="control-group ${hasErrors(bean: user, field: 'email', 'error')}">
					<label class="control-label" for="inputEmail"><g:message
							code="auth.login.email" /></label>
					<div class="controls">
						<g:field id="inputEmail" class="input-large" type="text"
							name="email" value="${user?.email}"
							placeholder="${message(code: 'auth.login.email')}" />
					</div>
				</div>

				<div
					class="control-group ${hasErrors(bean: user, field: 'captchaCode', 'error')}">
					<img class="control-label"
						src="${createLink(controller: 'simpleCaptcha', action: 'captcha')}"></img>

					<div class="controls">
						<g:field id="captchaCode" class="input-large" type="text"
							value="${user?.captchaCode}" name="captchaCode"
							placeholder="${message(code: 'user.captcha')}" />
					</div>
				</div>
			</div>

		</g:formRemote>
	</div>

	<div style="clear: both"></div>

	<div class="modal-footer">
		<button class="btn btn" form="facebookSigninForm">
			<g:message code="auth.login.new.user.create" />
		</button>
		<img id="loadingImageFacebookSignin"
			class="loadingImageSignin"
			src="${resource(dir:'images', file: 'ajax-loader.gif') }" alt="image"></img>
	</div>

	<script type="text/javascript">
		$(document).ready(function() {
			$("#loadingImageFacebookSignin").hide();
		});

		function showLoadingImageSignin() {
			$("#loadingImageFacebookSignin").fadeIn();
		}
	</script>
</div>
</html>